/**
* 果皮材质背景
*/
@mixin rind_bg($bg-color: #ff9810) {
  &::before,
  &::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    inset: 0;
    background-image: repeating-linear-gradient(
        90deg,
        transparent 0,
        $bg-color 4px,
        $bg-color 10px
      ),
      repeating-linear-gradient(
        transparent 0,
        transparent 9px,
        darken($bg-color, 25%) 10px
      );
  }
  &::after {
    top: 5px;
    left: 5px;
    opacity: 0.5;
  }
}

@mixin orange($radius: 200px, $t: 100px, $l: 100px, $bg: #ff9810) {
  .orange {
    $stem-bg: #757e25;
    position: absolute;
    width: $radius;
    height: $radius;
    top: $t;
    left: $l;
    border-radius: 50%;
    overflow: hidden;
    background-color: $bg;
    &-rind {
      position: absolute;
      inset: 0;
      @include og.rind_bg($bg);
    }
    &-stem {
      position: absolute;
      top: 14%;
      right: 21%;
      &::after,
      &::before {
        content: "";
        position: absolute;
        border-radius: 5px 10px 1px 10px;
        background-color: $stem-bg;
      }
      &::before {
        top: 0;
        right: 1px;
        width: 18px;
        height: 18px;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
        transform: rotate(25deg);
      }
      &::after {
        width: 12px;
        height: 20px;
        top: -8px;
        left: -12px;
        transform: rotate(40deg);
      }
    }
    &-effect {
      position: absolute;
      width: 120%;
      height: 120%;
      right: 0;
      bottom: 0;
      background-image: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0) 60%,
        rgba(0, 0, 0, 0.45) 100%
      );
      &::after {
        content: "";
        position: absolute;
        top: 24%;
        left: 28%;
        width: 30%;
        height: 32%;
        border-radius: 50%;
        background-image: radial-gradient(
          ellipse at center,
          rgba(255, 255, 255, 0.3) 0%,
          rgba(255, 255, 255, 0) 70%
        );
      }
    }
  }
}
